<template>
  <el-dialog class="infoDetailBox" :visible.sync="visible" width="700px"  label-width="auto" :before-close="handleClose">
    <div class="mg-bottom-10">
      <h2>{{detail.title}}</h2>
      <div style="display:flex;justify-content: space-between;padding:0 10px">
          <div>来源：珠海特报</div>
          <div class="detaileContent">{{ detail.createTime | dateTimeOnly }}</div>
      </div>
    </div>
    <div class="bottom_box">
      {{detail.content}}
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'InfoDetail',
    props: {
      visible: { type: Boolean, required: true, default: true },
      detail: { type: Object, required: true, default: () => ({}) }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
        this.$emit('update:detail', {})
      },
    },
  }
</script>

<style lang="scss">
.infoDetailBox{
  .mg-bottom-10{
    h2 {
      border-bottom: 1px solid #ddd;
      padding-bottom: 15px;
      text-align:center;
    }
    .detaileContent{
      text-align:right;
      padding-right:20px;
      color:#aaa
    }
  }
  .el-dialog__body{
    padding-top:0 ;
  }
  .el-dialog{
    border-radius: 10px;
  }
  .bottom_box{
      line-height: 30px;
      text-indent : 30px;
      letter-spacing:0px;
      color: #666;
      min-height: 200px;
      max-height: 600px;
      overflow-y: auto;
      font-size: 16px;
  }
}
</style>
